<template>
	<view class="wrapper" :style="colorStyle">
		<view class="bag"></view>
		<view class="system-height" :style="{ height: statusBarHeight }"></view>
<!--		<view class="page-msg">
			<view class="title">
				{{pageType == 1?$t('绑定手机号'):$t('手机号登录')}}
			</view>
			<view class="tip">
				{{pageType == 1?$t('登录注册需绑定手机号'):$t('首次登录会自动注册')}}
			</view>
		</view>-->
    <view class="merchant-msg">
      <img :src="configData.wap_login_logo" />
      <view class="name">
        {{configData.site_name}}
      </view>
    </view>
		<view class="page-form">
			<view class="item">
        <picker mode="multiSelector" @change="bindRegionChange"
                @columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
          <view class='acea-row'>
            <view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
            <view class='iconfont icon-dizhi fontcolor'></view>
          </view>
        </picker>
			</view>
			<view class="btn" @click="submitData">
				绑定地址
			</view>
		</view>
		<view class="protocol" v-if="pageType == 0 && !canGetPrivacySetting">
			<checkbox-group @click.stop='ChangeIsDefault'>
				<checkbox :class="inAnimation?'trembling':''" @animationend='inAnimation=false'
					:checked="protocol ? true : false" /> <text @click.stop='ChangeIsDefault'>{{$t(`已阅读并同意`)}}</text>
				<text class="main-color" @click.stop="privacy(4)">{{$t(`《用户协议》`)}}</text>
				{{$t(`与`)}}<text class="main-color" @click.stop="privacy(3)">{{$t(`《隐私协议》`)}}</text>
			</checkbox-group>
		</view>
		<Verify @success="success" :captchaType="'clickWord'" :imgSize="{ width: '330px', height: '155px' }"
			ref="verify"></Verify>
		<editUserModal :isShow="isShow" @closeEdit="closeEdit" @editSuccess="editSuccess">
		</editUserModal>
		<!-- #ifdef MP -->
		<privacyAgreementPopup v-if="canGetPrivacySetting" @onReject="onReject" @onAgree="onAgree">
		</privacyAgreementPopup>
		<!-- #endif -->

	</view>
</template>

<script>
	const app = getApp();
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import colors from '@/mixins/color.js';
	import editUserModal from '@/components/eidtUserModal/index.vue'
	import privacyAgreementPopup from '@/components/privacyAgreementPopup/index.vue'
	import {
		bindingUserPhone,
		verifyCode,
		registerVerify,
		updatePhone
	} from '@/api/api.js';
  import {
    userBindAddress,
	} from '@/api/user.js';
	import {
		loginMobile,
		getCodeApi,
		getUserInfo,
		phoneSilenceAuth
	} from "@/api/user.js";
	import {
		phoneLogin,
		wechatBindingPhone
	} from '@/api/public.js'
	import Routine from '@/libs/routine';
	import Verify from '../components/verify/index.vue';
	import Cache from '@/utils/cache';

  import {
    getCity
  } from '@/api/api.js';
	export default {
		mixins: [sendVerifyCode, colors],
		components: {
			Verify,
			editUserModal,
			privacyAgreementPopup
		},
		data() {
			return {
				statusBarHeight: statusBarHeight,
				pageType: 1, // 0 登录 1 绑定手机
				phone: '',
				captcha: '',
        region: [this.$t(`省`), this.$t(`市`), this.$t(`区`)],
        valueRegion: [0, 0, 0],
        userAddress: {
          is_default: false
        }, //地址详情
        district: [],
        multiArray: [],
        multiIndex: [0, 0, 0],
        cityId: 0,
        defaultRegion: [this.$t(`广东省`), this.$t(`广州市`), this.$t(`番禺区`)],
        defaultRegionCode: '110101',
				text: '获取验证码',
				isShow: false,
				protocol: false,
				inAnimation: false,
				authKey: "",
				backUrl: "",
				pageTitle: '绑定手机号',
				configData: Cache.get('BASIC_CONFIG'),
				canGetPrivacySetting: false,
			}
		},
		onLoad(options) {
			if (options.authKey) {
				this.authKey = options.authKey
			}

			this.backUrl = options.backUrl || ''
			if (options.pageType) {
				this.pageType = options.pageType || 1
				this.pageTitle = options.pageType == 1 ? '绑定手机号' : '手机号登录'
			}
			let pages = getCurrentPages();
			let prePage = pages[pages.length - 2];
			if (prePage && prePage.route == 'pages/order_addcart/order_addcart') {
				this.isHome = true;
			} else {
				this.isHome = false;
			}
      this.getCityList();
		},
		methods: {

      // #ifdef APP-PLUS
      // 获取选择的地区
      handleGetRegion(region) {
        this.region = region
      },
      // #endif
      // 回去地址数据
      getCityList: function() {
        let that = this;
        getCity().then(res => {
          this.district = res.data
          that.initialize();
        })
      },
      initialize() {
        let that = this,
            province = [],
            city = [],
            area = [];
        let cityChildren = that.district[0].c || [];
        let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
        that.district.forEach((item, i) => {
          province.push(item.n);
          if (item.n === this.region[0]) {
            this.valueRegion[0] = i
            this.multiIndex[0] = i
          }
        });
        that.district[this.valueRegion[0]].c.forEach((item, i) => {
          if (this.region[1] == item.c) {
            this.valueRegion[1] = i
            this.multiIndex[1] = i
          }
          city.push(item.n);
        });
        that.district[this.valueRegion[0]].c[this.valueRegion[1]].c.forEach((item, i) => {
          if (this.region[2] == item.c) {
            this.valueRegion[2] = i
            this.multiIndex[2] = i
          }
          area.push(item.n);
        });
        this.multiArray = [province, city, area]

      },
      bindRegionChange: function(e) {
        let multiIndex = this.multiIndex,
            province = this.district[multiIndex[0]] || {
              c: []
            },
            city = province.c[multiIndex[1]] || {
              v: 0
            },
            multiArray = this.multiArray,
            value = e.detail.value;

        this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
        // this.$set(this.region,0,multiArray[0][value[0]]);
        // this.$set(this.region,1,multiArray[1][value[1]]);
        // this.$set(this.region,2,multiArray[2][value[2]]);
        this.cityId = city.v
        this.valueRegion = [0, 0, 0]
        this.initialize();
      },
      bindMultiPickerColumnChange: function(e) {
        let that = this,
            column = e.detail.column,
            value = e.detail.value,
            currentCity = this.district[value] || {
              c: []
            },
            multiArray = that.multiArray,
            multiIndex = that.multiIndex;
        multiIndex[column] = value;
        switch (column) {
          case 0:
            let areaList = currentCity.c[0] || {
              c: []
            };
            multiArray[1] = currentCity.c.map((item) => {
              return item.n;
            });
            multiArray[2] = areaList.c.map((item) => {
              return item.n;
            });
            break;
          case 1:
            let cityList = that.district[multiIndex[0]].c[multiIndex[1]].c || [];
            multiArray[2] = cityList.map((item) => {
              return item.n;
            });
            break;
          case 2:

            break;
        }
        // #ifdef MP || APP-PLUS
        this.$set(this.multiArray, 0, multiArray[0]);
        this.$set(this.multiArray, 1, multiArray[1]);
        this.$set(this.multiArray, 2, multiArray[2]);
        // #endif
        // #ifdef H5
        this.multiArray = multiArray;
        // #endif



        this.multiIndex = multiIndex
        // this.setData({ multiArray: multiArray, multiIndex: multiIndex});
      },

			onAgree() {
				this.protocol = true
			},
			submitData() {
				let that = this;
				if (this.pageType == 0) {
					this.isLogin()
					return
				}

        uni.showLoading({
          title: this.$t(`正在绑定地址`)
        });

        userBindAddress({
          address: this.region,
        }).then(res => {
          uni.hideLoading();
          this.$util.Tips({
            title: '绑定成功'
          },{tab:1,url:'/pages/user/index'});
        }).catch(error => {
          uni.hideLoading()
          this.$util.Tips({
            title: error
          })
        })


			},
			isLogin() {
				if (!this.rules()) return

				uni.showLoading({
					title: this.$t(`正在登录中`)
				});
				Routine.getCode()
					.then(code => {
						phoneLogin({
								code,
								spread_spid: app.globalData.spid,
								spread_code: app.globalData.code,
								phone: this.phone,
								captcha: this.captcha,
							}).then(res => {
								uni.hideLoading();
								let time = res.data.expires_time - this.$Cache.time();
								this.$store.commit('LOGIN', {
									token: res.data.token,
									time: time
								});
								this.getUserInfo(res.data.bindName);
							})
							.catch(err => {
								uni.hideLoading();
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 2000
								});
							});
					})
					.catch(err => {
						console.log(err)
					});
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo(new_user) {
				let that = this;
				getUserInfo().then(res => {
					uni.hideLoading();
					that.userInfo = res.data;
					that.$store.commit('SETUID', res.data.uid);
					that.$store.commit('UPDATE_USERINFO', res.data);
					if (new_user) {
						this.isShow = true
					} else {
						// #ifdef MP
						that.$util.Tips({
							title: that.$t(`登录成功`),
							icon: 'success'
						}, {
							tab: 3,
							url: this.configData.wechat_auth_switch ? 2 : 1
						});
						// #endif
						// #ifndef MP
						that.$util.Tips({
							title: that.$t(`登录成功`),
							icon: 'success'
						}, {
							tab: 4,
							url: this.backUrl || 'pages/user/index'
						});
						// #endif

					}
				});
			},
			success(data) {
				this.$refs.verify.hide()
				let that = this;
				verifyCode().then(res => {
					registerVerify(that.phone, 'reset', res.data.key, this.captchaType, data.captchaVerification)
						.then(res => {
							that.$util.Tips({
								title: res.msg
							});
							that.sendCode();
						}).catch(err => {
							return that.$util.Tips({
								title: err
							});
						});
				});
			},
			/**
			 * 发送验证码
			 *
			 */
			async code() {
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: that.$t(`请填写手机号码`)
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))) return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
				this.$refs.verify.show();
				return;
			},
			ChangeIsDefault() {
				this.$set(this, 'protocol', !this.protocol);
			},
			closeEdit() {
				this.isShow = false
				this.$util.Tips({
					title: this.$t(`登录成功`),
					icon: 'success'
				}, {
					tab: 3,
					url: 2
				});
			},
			editSuccess() {
				this.isShow = false
			},
			back() {
				uni.navigateBack({
					delta: this.configData.wechat_auth_switch ? 2 : 1
				})
			},
			privacy(type) {
				uni.navigateTo({
					url: "/pages/users/privacy/index?type=" + type
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		background-color: #fff;
		min-height: 100vh;
		position: relative;

		.bag {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 460rpx;
			background: var(--view-linear);
		}

		.page-msg {
			padding-top: 160rpx;
			margin-left: 72rpx;

			.title {
				font-size: 48rpx;
				font-weight: 500;
				color: #333333;
				line-height: 68rpx;
			}

			.tip {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
		}

		.page-form {
			width: 606rpx;
			margin: 100rpx auto 0 auto;

			.item {
				width: 100%;
				height: 88rpx;
				background: #F5F5F5;
				border-radius: 45rpx;
				padding: 24rpx 48rpx;
				margin-bottom: 32rpx;

				input {
					width: 100%;
					height: 100%;
					font-size: 32rpx;
				}

				.placeholder {
					color: #BBBBBB;
					font-size: 28rpx;
				}

				input.codeIput {
					width: 300rpx;
				}

				.line {
					width: 2rpx;
					height: 28rpx;
					background: #CCCCCC;
				}

				.code {
					font-size: 28rpx;
					color: var(--view-theme);
					background-color: rgba(255, 255, 255, 0);
				}

				.code.on {
					color: #BBBBBB !important;
				}
			}

			.btn {
				width: 606rpx;
				height: 88rpx;
				background: var(--view-theme);
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 44rpx;
				margin-top: 48rpx;
				letter-spacing: 1px;
			}
		}
	}

	.title-bar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
		line-height: 48rpx;
	}

	.icon {
		position: absolute;
		left: 30rpx;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;

		image {
			width: 35rpx;
			height: 35rpx;
		}
	}

	.protocol {
		position: fixed;
		bottom: 52rpx;
		left: 0;
		width: 100%;
		margin: 0 auto;
		color: #999999;
		font-size: 24rpx;
		line-height: 22rpx;
		text-align: center;
		bottom: calc(52rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		bottom: calc(52rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.main-color {
			color: var(--view-theme);
		}

		.trembling {
			animation: shake 0.6s;
		}
	}

	/deep/ uni-checkbox .uni-checkbox-input {
		width: 28rpx;
		height: 28rpx;
	}

	/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
		font-size: 24rpx;
	}

	/deep/ uni-checkbox .uni-checkbox-wrapper {
		margin-bottom: 1px;
	}

	/*checkbox 选项框大小  */
	/deep/ checkbox .wx-checkbox-input {
		width: 28rpx;
		height: 28rpx;
	}

	/*checkbox选中后样式  */
	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: white;
	}

	/*checkbox选中后图标样式  */
	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		font-size: 22rpx;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

  .merchant-msg {
    padding-top: 252rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2;
    /* #ifdef H5 */
    position: relative;

    /* #endif */
    img {
      width: 152rpx;
      height: 152rpx;
      border-radius: 50%;
    }

    .name {
      font-size: 40rpx;
      font-weight: 500;
      color: #333333;
      line-height: 56rpx;
      margin-top: 32rpx;
    }
  }
</style>
